import React, {Component} from 'react';

class Box extends Component {
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if (this.props.current === this.props.index || nextProps.current === nextProps.index) {
            return true
        }
        return false
    }

    render() {
        console.log('render')
        //input框每填一遍数字,都会重新渲染
        return (
            <div style={{
                width: '100px',
                height: '100px',
                border: this.props.current === this.props.index ? '1px solid red' : '1px solid gray',
                margin: '10px',
                float: 'left',
            }}>

            </div>
        )
    }
}

class App
    extends Component {
    state = {
        list: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'],
        current: 0,
    }

    render() {
        return (
            <div>
                <input type="number" onChange={(event) => {
                    this.setState({
                        current: Number(event.target.value)
                    })
                }}/>

                <div style={{
                    overflow: 'hidden'
                }}>
                    {
                        this.state.list.map((item, index) =>
                            <Box key={item} current={this.state.current} index={index}></Box>
                        )
                    }
                </div>

            </div>
        );
    }
}

export default App;
